<template>
  <div class="orderDetails">
    <div class="topheader">
      <div class="bgBack"></div>
      <span class="headtitle">审批中</span>
    </div>
    <div class="infobox">
      <div class="infoleft">
        <img
          :src="require(`../../assets/images/${infoDate[0].headimg}`)"
          alt=""
        >
        <div class="infodetail">
          <span class="nameinfo">{{infoDate[0].name}} &nbsp;{{infoDate[0].typecontent}}</span>
          <span class="reqtime">发起时间：{{infoDate[0].startTime}} {{infoDate[0].time}}</span>
        </div>
      </div>
      <span
        class="statustext"
        :style="{color: infoDate[0].status === '审批中' ?  '#18b2ff' : ''}"
      >{{infoDate[0].status}}</span>
    </div>
    <div class="dodetailinfo">
      <div class="line">
        <span class="title">申请人</span>
        <span>{{infoDetail[0].name}} {{infoDetail[0].deptName}}</span>
      </div>
      <div class="line">
        <span class="title">项目名称</span>
        <span>{{infoDetail[0].projectName}}</span>
      </div>
      <div class="line">
        <span class="title">报销金额</span>
        <span><span class="fontstyle">{{infoDetail[0].amountNum}}</span>元</span>
      </div>
      <div class="line">
        <span class="title">开始时间</span>
        <span>{{infoDetail[0].startTime}}</span>
      </div>
      <div class="line">
        <span class="title">结束时间</span>
        <span>{{infoDetail[0].endTime}}</span>
      </div>
      <div class="line">
        <span class="title">事由</span>
        <span>{{infoDetail[0].reason}}</span>
      </div>
      <div class="line">
        <span class="title">上传图片</span>
        <span>
          <div v-for="(imgs, i) in infoDetail[0].imgbox" :key="i">
            <img
              :src="require(`../../assets/images/${imgs}`)"
              alt=""
            />
          </div>
        </span>
      </div>
      <div class="line">
        <span class="title">上传附件</span>
        <span>
          <div v-for="(imgs, i) in infoDetail[0].imgbox" :key="i">
            <img
              :src="require(`../../assets/images/${imgs}`)"
              alt=""

            />
            <span>文档出差说明</span>
          </div>
        </span>
      </div>
    </div>
    <div class="messagelist" v-for="(item, i) in reqListData" :key="i">
      <div class="columnline">
        <div
          class="imgmark"
          :style="{backgroundPosition: item.status === '待审批' ? '-7px -9px' : '-63px -4px' }"
        ></div>
        <div class="messagebox">
          <div class="triangle"></div>
          <div class="contenbox">
            <div class="conleft">
              <span>
                <span>{{item.name}}</span> &nbsp;{{item.jobName}}
              </span>
              <span>{{item.dateTime}} {{item.time}}</span>
            </div>
            <div
              class="conright"
              :style="{color: item.status === '待审批' ? '#EF6124' : '#4162FF' }"
            >{{item.status}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="timelong">历时2天</div>
    <div class="buttondo">
      <span>驳回</span>
      <span>同意</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';


@Component({
  components: {},
})
export default class OrderDetails extends Vue {
  reqListData: Array<any> = [
    {
      name: '张韶涵', jobName: '总经理', status: '待审批', dateTime: '2018-04-21', time: '13:00',
    },
    {
      name: '张韶涵', jobName: '总经理', status: '已通过', dateTime: '2018-04-21', time: '13:00',
    },
    {
      name: '张韶涵', jobName: '总经理', status: '待审批', dateTime: '2018-04-21', time: '13:00',
    },
    {
      name: '张韶涵', jobName: '总经理', status: '已通过', dateTime: '2018-04-21', time: '13:00',
    },
    {
      name: '张韶涵', jobName: '总经理', status: '待审批', dateTime: '2018-04-21', time: '13:00',
    },
  ];

  // 审批内容列表
  infoDate: Array<any> = [
    {
      name: '张韶涵', typecontent: '差旅报销', status: '审批中', startTime: '11:23', time: '12:00', headimg: '404.png',
    },
  ];

  // 审批内容
  infoDetail: Array<any> = [
    {
      reqname: '张韶涵', deptName: '北京互联网事业部', projectName: '上海分布项目组', amountNum: 1260, startTime: '11月24日', endTime: '11月25日', reason: '由于现在梭子啊项目在上海分布，出差几天，发票以及说明已放在附件里面', imgbox: ['404.png', '404.png'], docbox: ['404.png'],
    },
  ]; // 申请明细
}
</script>
<style scoped lang="scss">
.orderDetails {
  background: #fbfbfc;
  height: 100vh;
  overflow-y: auto;
  margin-bottom: 1.3rem;
  .topheader {
    height: 1rem;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;

    .bgBack {
      width: 36px;
      height: 46px;
      background: url("../../assets/images/orderDetail.png") no-repeat;
      background-position: -11px -66px;
      zoom: 0.4;
      margin-left: 0.2rem;
    }

    .headtitle {
      font-size: .4rem;
      font-weight: 700;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .infobox {
    display: flex;
    justify-content: space-between;
    margin-bottom: .2rem;
    padding: 10px;
    background: #fff;
    margin-top: .2rem;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: .1rem;
    box-shadow: 0 0 .3rem #eee;
    .statustext {
    }

    .infoleft {
      display: flex;
      align-items: center;
      img {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: .05rem;
      }
      .infodetail {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-left: .2rem;

        .reqtime {
          font-size: .2rem;
          color: #888;
          display: block;
          margin-top: 0.1rem;
          text-align: left;
        }

        .nameinfo {
          font-size: 0.35rem;
          text-align: left;
        }
      }
    }
  }

  .dodetailinfo {
    background: #fff;
    padding: 10px 0 10px 10px;
    margin-left: .2rem;
    margin-right: .2rem;
    border-radius: .05rem;
    box-shadow: 0 0 .1rem #eee;
    .line {
      display: flex;
      justify-content: flex-start;
      margin-bottom: .4rem;

      &:last-child {
        margin-top: .3rem;

        span:nth-child(2) {
          display: flex;
          font-size: .25rem;
          text-align: left;
        }
      }
      span {
        display: flex;
      }
      .title {
        color: #888;
        font-size: .3rem;
        flex: 0.5;
        text-align: left;
        white-space: nowrap;
      }

      span:nth-child(2) {
        flex: 2;
        font-size: .3rem;
        /*background: yellow;*/
        text-align: left;
        margin-left: .22rem;
        margin-right: .22rem;
        align-items: center;

        .fontstyle {
          color: red;
          font-weight: 600;
        }

        img {
          width: 1.5rem;
          height: 1.5rem;
          border: 1px solid #eee;
          margin-left: .25rem;
          border-radius: .2rem;
          margin-bottom: 5px;
        }
      }
    }
  }

  .messagelist {
    /*background: red;*/
    margin: 0 10px;
    font-size: .3rem;
    .columnline {
      width: 1px;
      height: 1.5rem;
      background: #e5e6e7;
      margin-left: .5rem;
      position: relative;

      .imgmark {
        width: 33px;
        height: 33px;
        background: url("../../assets/images/orderDetail.png") no-repeat;
        background-position: -7px -9px;
        zoom: 0.7;
        position: absolute;
        left: -17px;
        top: 38px;
      }

      .messagebox {
        width: 6rem;
        background: #fff;
        border-radius: .1rem;
        position: relative;
        left: 22px;
        top: 20px;

        .triangle {
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          border-right: 10px solid #fff;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          position: absolute;
          left: -16px;
          top: 13px;
          box-shadow: 0 0 10px #eee;
        }

        .contenbox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          box-shadow: 0 0 10px #eee;
          .conleft {
            display: flex;
            flex-direction: column;
            font-size: .32rem;
            span:nth-child(1) {
              text-align: left;
              span {
                font-weight: 800;
              }
            }

            span:nth-child(2) {
              display: block;
              margin-top: .13rem;
              font-size: .23rem;
              color: #999;
            }
          }
        }
      }
    }
  }

  .timelong {
    text-align: center;
    height: .9rem;
    line-height: 1rem;
    color: #666;
    font-size: .3rem;
  }

  .buttondo {
    margin-left: .2rem;
    margin-right: .2rem;
    height: 1rem;
    margin-bottom: .3rem;
    display: flex;

    span:nth-child(1) {
      text-align: center;
      display: block;
      height: 100%;
      line-height: 1rem;
      background: #84d6ff;
      flex: 1;
      font-weight: 800;
      font-size: .4rem;
      color: #fff;
    }

    span:nth-child(2) {
      flex: 2;
      text-align: center;
      background: #18b2ff;
      line-height: 1rem;
      font-weight: 800;
      font-size: .4rem;
      color: #fff;
    }
  }
}
</style>
